<template>
  <div class="home">
    <div class="header">
      <NavBar :list="list"></NavBar>
    </div>
    <!-- 轮播区域 -->
    <div class="Carousel">
      <CarouselMap :imgList="imgList" type="card"></CarouselMap>
    </div>

    <!-- 回到顶部组件 -->
    <ScrollTop>
      <template #ico> &uparrow; </template>
    </ScrollTop>
  </div>
</template>

<script setup lang="ts">
import NavBar from '../components/NavigationBar.vue'
import CarouselMap from '../components/CarouselMap.vue'
import ScrollTop from '../components/ScrollToTopButton.vue'

const list = ['首页', '关于我们', '攻略', '玩家社区']
const imgList = [
  'https://bbs-static.miyoushe.com/static/2024/06/05/54ba261ca9edc94d955710a6f7c190e0_671068140657242987.jpg',
  'https://bbs-static.miyoushe.com/static/2024/06/19/f31d9a3616e7a01e36cdbc60dac1994d_1079679623291121504.png',
  'https://bbs-static.miyoushe.com/static/2024/06/19/9e58e1f296edc367c284f667d1106ac6_698909215059919497.jpg'
]
</script>

<style scoped lang="scss">
.home {
  width: 100%;
  /* height: 70px; */

  .header {
    width: 100%;
    height: 70px;
    background: rgb(0, 0, 0);
    opacity: 0.8;
  }

  .Carousel {
    margin-top: 10px;
    // display: flex;
    // justify-content: center;
    // align-items: center;
  }
}
</style>
